<!doctype html>
<html class="no-js" lang="">
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    table {
      caption-side: top;
      width: auto;
      border-collapse: collapse;
      empty-cells: hide;
    }
    td {
      width: 30px;
      height: 30px;
    }
    .select {
      background-color: #F36303;
    }
  </style>
</head>
<body>
  <div id="app">
    <table border="1">
      <tr v-for="(rowItem, rowIndex) in table">
        <template v-for="(item, colIndex) in table[rowIndex]">
          <td :style="item.status === 1 ? ('background-color: ' + item.color) : ''"></td>
        </template>
      </tr>
    </table>
  </div>
</body>
<script src="js/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      width: 30,
      height: 20,
      defaultSelectColor: '#F36303',
      table: [],
      snake: []
    },
    methods: {
      /**
       * 初始化表格
       */
      initTable() {
        for (let i = 0; i < this.height; i++) {
          this.table.push([]);
          for (let j = 0; j < this.width; j++) {
            this.table[i].push({
              status: 0,
              color: ''
            });
          }
        }
      },
      // 初始化蛇
      initSnake() {
        this.snake = [];
        for (let i = 0; i < 3; i++) {
          this.snake.push({
            x: i,
            y: 0,
            color: this.defaultSelectColor,
            direction: 1
          });
        }
      },
      // 是否是活着的蛇
      isSnakeAlive(x, y) {
        if (x >= 0 && y >= 0 && x < this.width && y < this.height) {
          for (let i = 1; i < this.snake.length; i++) {
            if (this.snake[i].x === x && this.snake[i].y === y) {
              return false;
            }
          }
          return true;
        } else {
          return false;
        }
      },
      // 显示蛇
      showSnake() {
        if (this.isSnakeAlive(this.snake[0].x, this.snake[0].y)) {
          this.snake.forEach(o => {
            this.$set(this.table[o.y][o.x], 'status', 1);
            this.$set(this.table[o.y][o.x], 'color', o.color);
          })
        } else {
          this.initSnake();
        }
      },
      // 下一步的蛇
      nextSnake(direction) {
        for (let i = 0; i < this.snake.length; i++) {
          if (i === 0) {
            if (direction === 0) {
              this.snake.push({
                x: this.snake[0].x,
                y: this.snake[0].y - 1,
                color: this.defaultSelectColor,
                direction: direction
              });
            } else if (direction === 1) {
              this.snake.push({
                x: this.snake[0].x + 1,
                y: this.snake[0].y,
                color: this.defaultSelectColor,
                direction: direction
              });
            } else if (direction === 2) {
              this.snake.push({
                x: this.snake[0].x,
                y: this.snake[0].y + 1,
                color: this.defaultSelectColor,
                direction: direction
              });
            } else if (direction === 3) {
              this.snake.push({
                x: this.snake[0].x - 1,
                y: this.snake[0].y,
                color: this.defaultSelectColor,
                direction: direction
              });
            }
          } else {

          }
        }
        this.showSnake();
      },
    },
    mounted() {
      // 初始化表格
      this.initTable();
      // 初始化蛇
      this.initSnake();
      // 显示蛇
      this.showSnake();
    }
  });
</script>
</html>
